<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  padding: 10px;

  .rate {
    width: 100%;
    height: 50px;
    display: flex;
  }
}
.rate {
  width: 11px;
  display: flex;
}
footer {
  padding: 10px;
  width: 95%;
  height: 50px;
  position: absolute;
  bottom: 0;
}
</style>
<template>
  <van-nav-bar title="评价" left-arrow @click-left="$router.back()" />
  <div class="box">
    <div class="rate">
      <h2>总体</h2>
      <van-rate
        v-model="value"
        :size="25"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
    </div>

    <div>
      <h2>写评价</h2>
      <van-cell-group inset>
        <van-field
        
          rows="4"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="说一下您对本次的体验吧"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <footer>
      <van-button type="success" round size="large" @click="showToast('评价成功');">
        提交
      </van-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
const value = ref(5)
</script>
